iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

html與css粗淺新手入門教學系列 第 9

html鼠標移上改變圖樣和底色

  • 分享至 

  • xImage
  •  

我們昨天做出了四個按鈕,今天想要試著在鼠標移上時改變效果,首先先把按鈕顏色改成跟底色相同
https://ithelp.ithome.com.tw/upload/images/20210909/20140086qj043P3Njh.png
想讓物體在鼠標放上時改變狀態,就必須在css中用到hover這個語法,以下示範hover的寫法

        .but1:hover{
            
        }

在中間放入鼠標移上後想出現的效果,像改變底色就寫入其他底色

        .but1:hover{
            background-color: rgb(132, 219, 190);
        }

這邊選了一個比底色還要略深一點的顏色,出來的效果如下
https://ithelp.ithome.com.tw/upload/images/20210909/20140086WGX9nslImP.jpg
如果想要讓鼠標變成手套的形狀,也就是下圖這個圖案
https://ithelp.ithome.com.tw/upload/images/20210909/20140086xbSsrCSYun.jpg
可以再加上一行改變鼠標的程式碼

        .but1:hover{
            background-color: rgb(132, 219, 190);
            cursor:pointer;
        }

就可以讓鼠標放上時改為手套的樣式,但因為截圖無法看出效果所以就不放了,各位可以自己試試看


上一篇
html div水平並列
下一篇
html 改變按鈕位子
系列文
html與css粗淺新手入門教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言